<template>
  <div>
    <el-button
      :type="cellType"
      :disabled="disabled"
      @click="leftClick"
      @contextmenu.prevent.native="rightClick"
      ><span style="font-size: 22px">{{ label }}</span></el-button
    >
  </div>
</template>
<script>
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
const closedC = "closed";
// import New from './components/New.vue';
export default {
  name: "BoomCell",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
    state: {
      type: String,
      default: "closed",
    },
    value: {
      type: Number,
      default: 0,
    },
    i: Number,
    j: Number,
    disabled: Boolean,
  },
  data() {
    return {
      sampleD: "value",
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
    cellType() {
      switch (this.state) {
        case closedC:
          return "info";
        case "opened":
          if (this.value === 9) {
            return "danger";
          }
          return null;
        case "signed":
          return "warning";
        default:
          return "success";
      }
    },
    label() {
      switch (this.state) {
        case closedC:
          return "";
        case "opened":
          return this.value;
        case "signed":
          return "#";
        default:
          return "";
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
    //架构设计上应该让button标签作为插槽,方便其绑定各种事件与核心数据交互 ,本组件作用是包装其他实例整体
    //不然需要太多的$emit
    closedToOpened() {
      if (this.state !== "closed") {
        return;
      }
      this.$emit("closed-to-opened", this.i, this.j);
    },
    openedToOpened() {
      if (this.state !== "opened") {
        return;
      }
      this.$emit("opened-to-opened", this.i, this.j);
    },
    leftClick() {
      if (this.state === "closed") {
        this.closedToOpened();
      } else if (this.state === "opened") {
        this.openedToOpened();
      }
      // this.state = "opened";
    },
    rightClick() {
      if (this.state === "closed") {
        this.closedToSigned();
      } else if (this.state === "signed") {
        this.signedToClosed();
      }
    },
    closedToSigned() {
      if (this.state !== "closed") {
        return;
      }
      this.$emit("closed-to-signed", this.i, this.j);
      // this.state = "signed";
    },
    signedToClosed() {
      if (this.state !== "signed") {
        return;
      }
      this.$emit("signed-to-closed", this.i, this.j);
    },
  },
  watch: {
    // A B C D
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.el-button {
  min-width: 64px;
  min-height: 64px;
}
</style>
